import React, { useEffect } from 'react';
import { Carousel } from 'antd';
import './index.less';

const Page = () => {
    const images = [
        "https://order-saas-1338544684.cos.ap-guangzhou.myqcloud.com/okeydo/p1.png",
        "https://order-saas-1338544684.cos.ap-guangzhou.myqcloud.com/okeydo/p2.png",
        "https://order-saas-1338544684.cos.ap-guangzhou.myqcloud.com/okeydo/9261005b729f80c1e134d6a71509d44.png"
    ];

    // 备用测试图片
    const fallbackImages = [
        "https://via.placeholder.com/800x600/333/fff?text=Slide+1",
        "https://via.placeholder.com/800x600/666/fff?text=Slide+2", 
        "https://via.placeholder.com/800x600/999/fff?text=Slide+3"
    ];

    const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
        console.error('图片加载失败:', e.currentTarget.src);
        // 如果原图片加载失败，使用备用图片
        const index = parseInt(e.currentTarget.alt.split(' ')[1]) - 1;
        e.currentTarget.src = fallbackImages[index];
    };

    const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
        console.log('图片加载成功:', e.currentTarget.src);
    };

    useEffect(() => {
        // 动态修改网页title
        document.title = 'Solid';
    }, []);

    return (
        <div className="page">
            <div className="carousel-container">
                {/* 取消工具栏 */}
                <Carousel dots={false}>
                    {images.map((src, index) => (
                        <div key={index}>
                            <div className="carousel-item">
                                <img 
                                    src={src} 
                                    alt={`Slide ${index + 1}`}
                                    onError={handleImageError}
                                    onLoad={handleImageLoad}
                                />
                            </div>
                        </div>
                    ))}
                </Carousel>
            </div>
        </div>
    );
}

export default Page;